import React, { useState, useEffect, useMemo } from 'react'
import { Card, Table, Button, Modal, Form, Input, Select, message } from "antd"
import { useNavigate } from "react-router-dom"
import { findAllProduct, findProductByType } from "../../apis/productApi"

export default function ProductList() {
  // 表格的数据源
  const [dataSource, setDataSource] = useState([])
  const [searchType, setSearchType] = useState("")
  const [searchData, setSearchData] = useState("")
  const [sortType,setSortType] = useState(0)
  //不是官方提供的，路由组件提供的
  const navigate = useNavigate()
  useEffect(() => {
    fetchData()
  }, [])
  // useMemo(()=>{
  //   switch(sortType){
  //     case 0:return dataSource;
  //     case 1:return dataSource.sort((a,b)=>b.price - a.price)
  //   }
  // },[sortType])
  const fetchData = async () => {
    const res = await findAllProduct()
    console.log(res);
    setDataSource(res.data.data)
  }
  //  表头数据
  const columns = [
    {
      title: '商品名字',
      dataIndex: 'name',
      align: "center"
    },
    {
      title: '商品描述',
      dataIndex: 'title',
      align: "center"
    },
    {
      title: '商品价格',
      dataIndex: 'price',
      align: "center"
    },
    {
      title: '商品类型',
      dataIndex: 'type',
      align: "center",
      render: (params) => {
        if (params) {
          return params.name
        } else {
          return "暂无数据"
        }
      }
    },
    {
      title: '商品状态',
      dataIndex: 'state',
      align: "center",
      render: (params) => {
        const res = params == 0 ? <Button type="primary">点击上架</Button> : <Button type="default">点击下架</Button>
        return res
      }
    },
    {
      title: '操作',
      align: "center",
      render: (val1, val2) => {
        console.log(val1, val2);
        return (
          <>
            <Button onClick={()=>gotoUpdatePage(val1)}>修改</Button>
            <Button>删除</Button>
          </>
        )
      }
    }
  ];

  const gotoPage = () => {
    //this.$router.push() replace()
    navigate("/home/productAdd", { replace: true })
  }
  const gotoUpdatePage = (val)=>{
    console.log(val);
    navigate(`/home/productUpdate?id=${val._id}`)
    // navigate("/home/productUpdate",{state:{id:val._id,name:"xiaowang"}})
    // navigate(`/home/productUpdate/${val._id}`)
  }
  const search =async ()=>{
    console.log(searchType,searchData);
    const res = await findProductByType({searchType,searchData})
    setDataSource(res.data.data)
  }

  return (
    <React.Fragment>
      <div style={{ padding: "20px 0px" }}>
        <Select
          style={{ width: "180px" }}
          showSearch
          onChange={(val) => setSearchType(val)}
          options={[
            { value: "name", label: "名字搜索" },
            { value: "title", label: "描述搜索" },
          ]}>

        </Select>
        <Input onChange={(val) => setSearchData(val.target.value)} style={{ width: "180px" }}></Input>
        <Button onClick={search} type='primary'>搜索</Button>
      </div>
      <Card
        title={"商品列表"}
        extra={<Button onClick={gotoPage} type='dashed'>新增商品</Button>}
        style={{
          width: "100%",
        }}
      >
        <Table
          dataSource={dataSource}
          columns={columns}
          bordered
          loading={false}
          rowKey="_id"
          pagination={{ defaultCurrent: 1, defaultPageSize: 8, showQuickJumper: true, showSizeChanger: true, pageSizeOptions: [8, 16] }}
        />
      </Card>
    </React.Fragment>
  )
}
